
// 获取元素对象
var inp = document.querySelector('input')
var onebtn = document.querySelector('.one')
var twobtn = document.querySelector('.two')


var arr = JSON.parse(localStorage.getItem("data")) || []

// 渲染数据
function show(arr){
  var str= ""
  for(var i=0;i<arr.length;i++){
    str+=` <tbody id="tbody">
    <tr>
        <td>${arr[i].name}</td>
        <td>
            <button onclick=del(${i})>删除</button>
        </td>
    </tr>         
    </tbody>`
  }
  document.querySelector('#tbody').innerHTML = str
}

show(arr)



// 添加
onebtn.onclick = function(){
    if(inp.value==""){
      alert("请输入内容")
      return
    }
  arr.push({name:inp.value})
  inp.value = ""
// 持久化存储
  localStorage.setItem("data",JSON.stringify(arr))
  show(arr)
}

// 删除
function del(i){
  arr.splice(i,1)
  show(arr)
  localStorage.setItem("data",JSON.stringify(arr))
}

// 搜索
twobtn.onclick = function(){
  var val = inp.value
  console.log("arr",arr);
  arr = arr.filter(function(item){return item.name.indexOf(val)>-1})
  console.log(arr);
  show(arr)
  inp.value = ""
//  回复到全部数据
  arr = JSON.parse(localStorage.getItem("data")) || []
}


// inp.onblur = function(e){
//     var arr = JSON.parse(localStorage.getItem("data")) || []
//     console.log('arr',arr);
//     show(arr)
// }
